<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        
        <!-- jquery -->
        <script src="/lianxijs/libs/jquery/jquery-1.11.1.min.js"></script>
        
        <!-- http插件 -->
        <script src="/lianxijs/libs/http/axios.min.js"></script>
        
        <!-- 弹窗插件 -->
        <link rel="stylesheet" type="text/css" href="/lianxijs/libs/sweetalert/sweetalert.css"  />
        <script src="/lianxijs/libs/sweetalert/sweetalert-dev.js"></script>
        
        <!-- 时间格式化插件 -->
        <script src="/lianxijs/libs/moment/moment.min.js"></script>   
        
        <!-- 精确计算插件 -->
        <!-- <script src="/lianxijs/libs/number-precision/index.iife.js"></script> -->
        <script src="/lianxijs/libs/number-precision/index.umd.js"></script>
        
        <!-- 带搜索的下拉框 -->
        <link rel="stylesheet" type="text/css" href="/lianxijs/libs/select2/select2.css"/>
        <script src="/lianxijs/libs/select2/select2.js"></script>
        
        <!-- base64插件（https://github.com/dankogai/js-base64） -->
        <script src="/lianxijs/libs/base64/base64.min.js"></script>
        
    </head>
    <body>
        <div>
            <button onClick="getDataByGet()">点我发送get请求获取数据</button>
        </div>
        <br/>
        <div>
            <table>
                <tr>
                    <th>姓名</th>
                    <th>性别</th>
                    <th>年龄</th>
                </tr>
                <tr>
                    <td id="0_name"></td>
                    <td id="0_sex"></td>
                    <td id="0_age"></td>
                </tr>
                <tr>
                    <td id="1_name"></td>
                    <td id="1_sex"></td>
                    <td id="1_age"></td>
                </tr>
                <tr>
                    <td id="2_name"></td>
                    <td id="2_sex"></td>
                    <td id="2_age"></td>
                </tr>
                <tr>
                    <td id="3_name"></td>
                    <td id="3_sex"></td>
                    <td id="3_age"></td>
                </tr>
            </table>
        </div>
    </body>
</html>
<script>
    let getDataByGet = function () {
        axios({
            method: 'get', // 使用get请求
            url: '/json/list1.json', // 这是后端提供的api
            // get请求使用 params 传递参数
            params: {
                id: 1
            },
            // `responseType` 表示服务器响应的数据类型，可以是 'arraybuffer', 'blob', 'document', 'json', 'text', 'stream'
            responseType: 'json', // 默认的
        }).then(function (response) {
            console.log(response);
            // 这里只是模拟，所以列表不是动态遍历
            for (let i in response.data) {
                let data = response.data[i];
                for (let key in data) {
                    let id = "#" + i + "_" + key;
                    $(id).text(data[key]);
                }
            }
        });
    };
</script>